<template>
  <div class="main p-4">
    <van-empty v-if="dataList.length == 0" description="暂时还没有学生请假" />
    <div
      v-else
      v-for="(item, index) in dataList"
      :key="index"
      class="p-4 shadow-md"
    >
      <div class="title flex justify-between">
        <h3 class="font-bold text-xl">{{ item.leavetype }}</h3>
        <van-tag :type="item.state | type">{{ item.state | state }}</van-tag>
      </div>
      <div class="mt-2">
        <p>{{ item.reason }}</p>
      </div>

      <div class="flex justify-between mt-2">
        <p class="text-xs">
          时间：{{ item.starttime | date }} - {{ item.endtime | date }}
        </p>
        <p class="text-xs">申请时间：{{ item.createtime | date }}</p>
      </div>
      <div class="flex">
        <p class="text-xs mt-2">
          申请人：<el-tag type="danger">{{ item.username }}</el-tag>
        </p>
        <p class="text-xs mt-2 ml-4">
          班级：<el-tag>{{ item.classes }}</el-tag>
        </p>
      </div>
      <van-divider v-if="item.state == 0" />

      <div v-if="item.state == 0" class="flex justify-around">
        <van-button
          @click="refuse(item.leave_id)"
          plain
          type="danger"
          class="flex-1"
          ><van-icon name="cross" />拒绝</van-button
        >
        <van-button
          @click="agree(item.leave_id)"
          plain
          type="primary"
          class="flex-1"
          ><van-icon name="success" />通过</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'leaveRecord',
  data () {
    return {
      dataList: [],
    }
  },
  filters: {
    date (time) {
      return dayjs(time).format('YYYY-MM-DD ')
    },
    state (type) {
      if (type == 0) {
        return '未审批'
      }
      if (type == 1) {
        return '不通过'
      }
      if (type == 2) {
        return '通过'
      }
    },

    type (type) {
      if (type == 0) {
        return 'primary '
      }
      if (type == 1) {
        return 'danger'
      }
      if (type == 2) {
        return 'success'
      }
    }
  },
  created () {
    this.getLeave()
  },
  computed: {
    user () {
      return JSON.parse(localStorage.userInfo)
    }
  },
  methods: {
    async getLeave () {
      const { data: result } = await this.$Axios.get('getStuleave', {
        params: {
          u_id: this.user.teacher_id
        }
      })
      console.log(result);
      this.dataList = result
    },
    async refuse (id) {
      const { data: result } = await this.$Axios.get('setleavenopass', {
        params: {
          leave_id: id
        }
      })
      console.log(result);
      this.getLeave()
    },
    async agree (id) {
      const { data: result } = await this.$Axios.get('setleavepass', {
        params: {
          leave_id: id
        }
      })
      console.log(result);
      this.getLeave()
    }
  },
}
</script>

<style scoped>
</style>